import { useRouter, useRoute, RouteLocationRaw } from 'vue-router'
import { Custom, CustomEnum } from 'custom/index'

interface Ctx {
  props: any;
  ctx: any;
  _c: any;
  $event: any;
  router: any;
  route: any;
}

interface Action {
  (ctx: Ctx): void
}
export default class AuthButton extends Custom {
  public static name: CustomEnum = 'AuthButton';

  protected _action: Action = () => {}
  action(cb: Action) {
    this._action = cb
    return this
  }

  submitFormPage() {
    return this.action(({ _c }) => {
      _c.dispatch('FormPage', 'submit')
    })
  }

  back() {
    return this.action(({ router }) => {
      router.back()
    })
  }

  push(to: RouteLocationRaw) {
    return this.action(({ router }) => {
      router.push(to)
    })
  }

  to(name: string, to: any = {}) {
    return this.action(({ router }) => {
      router.push(Object.assign({ name }, to))
    })
  }

  protected useAttrs(props?: any, ctx?: any) {
    const router = useRouter()
    const route = useRoute()
    const onClick = (e) => {
      this._action({ props, ctx, _c: this, router, route, $event: e })
    }
    return {
      onClick
    }
  }

  content(content: string) {
    this._props.content = content
    return this
  }

  formatter(formatter: any) {
    this._props.formatter = formatter
    return this
  }

  disabled(disabled: any) {
    this._props.disabled = disabled
    return this
  }

  show(show: any) {
    this._props.show = show
    return this
  }

  auth(auth: null | string = null) {
    this._props.auth = auth
    return this
  }

  type(type: string | ((row: any) => string)) {
    this._props.type = type
    return this
  }
  primary() {
    return this.type('primary')
  }
  danger() {
    return this.type('danger')
  }

  end() {
    return this.upto('AuthButtonGroup')
  }
}
